<template>
    <div class="first_level_page admission_ticket_page">
        <div class="voucher_box">
            <section class="tab_section">
                <div class="tab" :class="{active: stateFlag=='0'}" @click="DisableTicketList">我的未领取门票</div>
                <div class="tab" :class="{active: stateFlag=='1'}" @click="EnableTicketList">我的已领取门票</div>
            </section>
            <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" style="margin-top: -1.62rem;">
                <div class="record_box">
                    <ul>
                        <li v-for=" value in list">
                            <img src="../../images/record_bg.png">
                            <div class="dw clear" @click="toVoucherDetail(value)" >
                                <div class="left">
                                    <h2><em>￥</em>{{Number.parseInt(value.deductAmount)}}</h2>
                                    <p>旅游门票</p>
                                </div>

                                <div class="right">
                                    <h3 class="truncate">{{value.voucherName}}</h3>
                                </div>
                            </div>

                            <div v-if="value.receiveSellerId!=0">
                                <div v-if="value.exchangeFlag==0">
                                    <div class="btn color_b" @click.stop="ExchangeValidate(value)">
                                        查看凭证
                                    </div>
                                </div>
                                <div class="bottom" v-else>
                                    已领取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                            </div>
                            <div v-else>
                                <div class="btn color_c" @click.stop="getReceiveVoucherSellers(value)">
                                    领取兑换
                                </div>
                            </div>
                        </li>

                        <li v-if="Object.keys(list).length==0" class="no_data">
                            <img src="../../images/no_data.png" alt="">
                        </li> 
                    </ul>
                </div>
            </v-scroll>
        </div>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import Scroll from 'src/components/common/pulldown';
import {mapState} from 'vuex'
import {fmoney} from 'src/config/mUtils'
import {myEnableTicketVoucherList,myDisableTicketVoucherList} from 'src/service/getData'

export default {
    data(){
        return{
            admissionTickettitle: '我的门票',
            token:'',
            stateFlag:'0',
            list:[],
            listdata: [],
            ticketdata:[],
            empImg:0,
        }
    },
    mounted(){
        this.initData();
    },
    computed:{
        ...mapState([
            'userInfo',
        ]),
    },
    components:{
        'v-scroll':Scroll
    },
    methods:{
        fmoney(s, n){
            return fmoney(s, n)
        },
        //初始化数据
        async initData(){
            this.$el.querySelector('.load-more').style.display = 'none'
            // this.$el.querySelector('.pull-refresh').style.display = 'none'
            this.token = this.userInfo.token;
            this.empImg=0;
            this.DisableTicketList();
        },
        //我的已领门票
        async EnableTicketList(){
            this.$el.querySelector('.load-more').style.display = 'block'
            // this.$el.querySelector('.pull-refresh').style.display = 'block'
            this.list = [];
            this.stateFlag='1';
            let data = await myEnableTicketVoucherList(this.token);
            this.listdata = data.data;
            this.list = this.listdata;
            if(this.list.length==0)
            {
                this.empImg=0;
                this.$el.querySelector('.load-more').style.display = 'none'
            }
            else
            {
                this.empImg=1;
                this.$el.querySelector('.load-more').style.display = 'none'
            }
            this.listdata = [];
        }, 
        //我的未领门票
        async DisableTicketList(){
            this.$el.querySelector('.load-more').style.display = 'block'
            // this.$el.querySelector('.pull-refresh').style.display = 'block'
            this.list = [];
            this.stateFlag='0';
            let data = await myDisableTicketVoucherList(this.token);
            this.ticketdata = data.data;
            this.list = this.ticketdata;
            if(this.list.length==0)
            {
                this.empImg=0;
                this.$el.querySelector('.load-more').style.display = 'none'
            }
            else
            {
                this.empImg=1;
                this.$el.querySelector('.load-more').style.display = 'none'
            }
            this.ticketdata = [];
        }, 
        async toVoucherDetail(value){
            if(value.receiveSellerId!=0&&value.exchangeFlag==0){
                this.$router.push({path:'/showValidate', query:{voucherCode:value.voucherCode}});
            }else{
                this.$router.push({path:'/voucherDetail', query:{voucherCode:value.voucherCode}});
            }
        },
        onRefresh(){
            return;
        },
        onInfinite(){
            return;
        },
        async getReceiveVoucherSellers(value){
            this.$router.push({path:'/voucherSellers',query:{voucherCode:value.voucherCode}});
        },
        async ExchangeValidate(value){
            this.$router.push({path:'/showValidate', query:{voucherCode:value.voucherCode}});
        }
        
    },
    watch:{
        userInfo:function(value){
            this.initData();
        }
    }
}

</script>

<style lang="scss" scoped>
     @import 'src/style/mixin'; 
    .tab_section{
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.28rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $orange;
            border-bottom: .04rem solid $orange;
        }
    }
    .invalid_icon_bg{
        position: absolute;
        top: 1.1rem;
        right: .2rem;
        @include wh(1.3rem, 1.3rem);
    }

span , em , i{font-style:normal;}
.voucher_box .top{text-align: center;padding-top:.56rem;padding-bottom:.56rem;}
.voucher_box .top .images{padding-bottom:.46rem;}
.voucher_box .top img{width:1.3rem;height:1.3rem;}
.voucher_box .text{text-align: center;font-size:.34rem;color:#333;}
.voucher_box .text2{text-align: center;font-size:.28rem;color:#666;margin-top:.3rem;}
.voucher_box .text2 em{color:#ee7859;margin-left:.26rem;}
.voucher_box .btn{width:2.22rem;margin:0 auto;margin-top:.26rem; line-height:.64rem;border-radius:10rem;border:.02rem solid #eee;color:#666;font-size:.26rem;}
.voucher_box .btn:active{background:#f5f5f5;}
.record_box{padding:.22rem .14rem 0 .14rem;}
.record_box ul li{border-radius:.05rem;position:relative;margin-bottom:.22rem;}
.record_box img{width:100%;}
.record_box ul li .dw{position:absolute;width:100%;height:100%;top:0;left:0;font-size:.24rem;}
.record_box ul li .dw .left{width:2rem;text-align: center;margin-top:.5rem;}
.record_box ul li .dw .left h2{font-size:.6rem;color:#ffa101;}
.record_box ul li .dw .left h2 em{font-size:.4rem;}
.record_box ul li .dw .left p{margin-top:.24rem;color:#ffa101;}
.record_box ul li .dw .right{
    -webkit-width:calc(100% - 2.8rem);
    -moz-width:calc(100% - 2.8rem);
    -o-width:calc(100% - 2.8rem);
    width:calc(100% - 2.8rem);
    position:absolute;
    right:.2rem;
    top:.48rem;
    height:50%;
}
.record_box ul li .dw .right h2{font-size:.28rem;color:#333;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.record_box ul li .btn{position:absolute;bottom:.4rem;right:.2rem;border-radius:.05rem; line-height:.54rem;width:1.7rem;text-align: center;color:#fff ;index:99;}
.record_box ul li .dw .text{position:absolute;bottom:.4rem;right:.3rem;line-height:.54rem;index:99;}
.color_a{background:#fd7e61;}
.color_b{background:#8fcd7a;}
.color_c{background:#ffa101;}
.color_d{color:#fd7e61;}
.color_e{color:#ffa101;}
.no_data{
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    text-align: center; 
    padding-top: 0.5rem; 
    background: #f4f4f4; 
    z-index: 10;
    img{
        width: 1.88rem;
        height: 2.6rem;
    }
}
.record_box ul li .dw .right h2{font-size:.28rem;color:#333;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.no_data{text-align: center; margin-top: 3rem;}
.no_data img{width:1.88rem; height:2.6rem;}
.truncate{word-wrap:normal;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.record_box ul li .dw .right h3{font-size:.28rem;color:#333;}
.record_box ul li .dw .right p{font-size:.24rem;color:#999;margin-top:.16rem;}
.record_box ul li .bottom{position:absolute;bottom:0;left:0;width:100%; background:#fbfbfb;line-height:.5rem;font-size:.22rem;color:#ee7859;padding:0 .16rem;border-radius:0 0 .08rem .08rem;text-align:right;}
</style>
